<template>
  <div class="my-product">
    <div class="pt-40 nav-bar">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>我的商品</el-breadcrumb-item>
        <el-breadcrumb-item>商品列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-container>
      <el-aside width="200px">
        <ul class="h-full">
          <li class="active text-[14px]">商品列表</li>
        </ul>
      </el-aside>
      <el-container>
        <el-header height="300">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="商品名称">
              <el-input
                v-model="formInline.user"
                placeholder="商品名称"
                clearable
              />
            </el-form-item>
            <el-form-item label="商品ID">
              <el-input
                v-model="formInline.user"
                placeholder="商品ID"
                clearable
              />
            </el-form-item>
            <el-form-item label="基础商品">
              <el-select
                v-model="formInline.region"
                placeholder="Activity zone"
                clearable
              >
                <el-option label="Zone one" value="shanghai" />
                <el-option label="Zone two" value="beijing" />
              </el-select>
            </el-form-item>
            <el-form-item label="创建时间">
              <el-date-picker
                v-model="formInline.date"
                type="daterange"
                start-placeholder="请选择"
                end-placeholder="请选择"
                :default-value="[new Date(2010, 9, 1), new Date(2010, 10, 1)]"
                placeholder="创建时间"
                clearable
              />
            </el-form-item>

            <el-form-item>
              <el-button @click="onSubmit">重置</el-button>
              <el-button type="primary" @click="onSubmit">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-header>
        <el-main class="bg-[#fff] py-16 px-24">
          <div class="pb-16">
            <el-button @click="batchOrdering" type="primary"
              >批量下单</el-button
            >
          </div>
          <div
            class="flex justify-between items-center px-24 py-12 bg-[rgba(0,0,0,.02)]"
          >
            <div class="text-[14px] text-custom-gray">
              已选择 {{ multipleSelection.length }} 项
            </div>
            <el-button @click="handleCancelSelect" text
              >取消选择</el-button
            >
          </div>
          <el-table
            ref="multipleTableRef"
            :data="tableData"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="50" />
            <el-table-column label="商品信息" width="300">
              <template #default="scope">
                <div class="flex items-center">
                  <div>
                    <el-image
                      fit="cover"
                      style="width: 100px; height: 100px"
                      :preview-src-list="[scope.row.materialImage]"
                      :src="scope.row.materialImage"
                    ></el-image>
                  </div>
                  <div class="ml-10">
                    <div>
                      <span class="text-[14px]">{{ scope.row.name }}</span>
                    </div>
                    <div>
                      <div class="text-[12px]">id:{{ scope.row.id }}</div>
                      <div class="text-[12px]">
                        商家编码: {{ scope.row.code }}
                      </div>
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              width="120"
              property="supplyPrice"
              label="商品价"
            >
              <template #default="scope">
                <div class="text-[14px]">
                  ¥{{ scope.row.supplyPrice / 100 }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              width="100"
              property="orderCount"
              label="累计销量"
              show-overflow-tooltip
            />
            <el-table-column
              width="100"
              property="fmtCreatedAt"
              label="创建时间"
            />
            <el-table-column
              width="120"
              property="warningTip"
              label="当日库存剩余"
            />
            <el-table-column fixed="right" align="center" label="操作">
              <template #default="scope">
                <el-button
                  link
                  type="primary"
                  size="small"
                  @click="handleBuySubmit(scope.row, scope)"
                  >下单/拿样</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div class="flex items-center justify-end">
            <el-pagination layout=" prev, pager, next" :total="10">
            </el-pagination>
          </div>
        </el-main>
      </el-container>
    </el-container>
    <el-drawer v-model="drawer" title="创建订单" :size="1100">
      <el-table :data="orderTable" style="width: 100%">
        <el-table-column label="序号" type="index" width="80" />
        <el-table-column width="350" prop="prop" label="商品名称">
          <template #default="scope">
            <el-select v-model="scope.row.name" placeholder="">
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column width="350" prop="prop" label="商品规格">
          <template #default="scope">
            <el-select v-model="scope.row.name" placeholder="">
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          width="100"
          prop="prop"
          label="下单数量"
        >
          <template #default="scope">
            <el-input v-model="scope.row.soldCount" placeholder=""></el-input>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          width="100"
          prop="prop"
          label="商品价格"
        >
          <template #default="scope">
            {{ scope.row.supplyPrice ? scope.row.supplyPrice / 100 : '-' }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="prop" fixed="right" label="操作">
          <template #default="scope">
            <el-button
              v-if="orderTable.length > 1"
              @click="handleDelete(scope.$index)"
              link
              type="primary"
              size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pt-16">
        <el-button @click="addProduct" type="primary">添加商品</el-button>
      </div>
      <template #footer>
        <div
          :style="{
            '--el-drawer-padding-primary': 0,
          }"
          class="flex justify-end items-center gap-[16px]"
        >
          <div>
            <div>
              <span class="text-[14px]">商品金额</span>
              <span class="text-[18px] text-custom-red">
                ¥{{ totalPrice / 100 }}
              </span>
            </div>
            <div class="text-[14px] text-custom-gray">
              (不含发货费，实际金额以结算页为准)
            </div>
          </div>
          <el-button @click="toPath('/myProduct/payment')" type="primary"
            >下一步</el-button
          >
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
import { ArrowRight } from '@element-plus/icons-vue'
import { computed, reactive, ref, toRaw, watch } from 'vue'
import { ElTable } from 'element-plus'
import mockData from './mock'
import { useRouter } from 'vue-router'

const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<any[]>([])
const toggleSelection = (rows?: any[]) => {
  if (rows) {
    rows.forEach((row) => {
      multipleTableRef.value!.toggleRowSelection(row, undefined)
    })
  } else {
    multipleTableRef.value!.clearSelection()
  }
}
const handleSelectionChange = (val: any[]) => {
  multipleSelection.value = val
}

const handleCancelSelect = () => {
  multipleTableRef.value!.clearSelection()
}

const tableData: any[] = mockData.data.items
const formInline = reactive({
  user: '',
  region: '',
  date: '',
})

const onSubmit = () => {
  console.log('submit!')
}

let orderTable = ref([])
const drawer = ref(false)
const handleBuySubmit = (row: any) => {
  drawer.value = true
  orderTable.value = [toRaw(row)]
}
const batchOrdering = () => {
  if (multipleSelection.value.length) {
    drawer.value = true
    orderTable.value = multipleSelection.value
  }
}
const addProduct = () => {
  orderTable.value.push({
    supplyPrice: 0,
  })
}

const router = useRouter()
const toPath = (path) => {
  router.push(path)
}

const handleDelete = (index) => {
  orderTable.value.splice(index, 1)
}
let totalPrice = ref(0)
watch(
  () => orderTable.value,
  (newVal, oldVal) => {
    totalPrice.value = newVal
      .map((res) => res.supplyPrice)
      .reduce((acc, cur) => acc + cur, 0)
  },
  { deep: true }
)
const options = [
  {
    id: 12957453,
    name: '【111】58mm加厚毛绒吧唧',
  },
  {
    id: 13471077,
    name: '【Nick】仿柯印厚亚克力挂件（支持彩窗）',
  },
  {
    id: 13471115,
    name: '【Nick】12cm插卡立牌圆形底座',
  },
]
</script>

<style lang="scss" scoped>
.demo-form-inline {
  .el-select {
    --el-select-width: 220px;
  }
}
.my-product {
  width: 1180px;
  margin: 0 auto 40px;
  .nav-bar {
    padding-bottom: 48px;
  }
  .el-container {
    .el-aside {
      ul {
        margin-right: 10px;
        background-color: #fff;
        padding: 12px 10px;
        li {
          display: flex;
          justify-content: center;
          align-items: center;
          list-style: none;
          height: 44px;
          border-radius: 4px;
          cursor: pointer;
          margin: 4px 0;
          &.active {
            background: linear-gradient(270deg, #e5ffef 0%, #fff6c9 100%);
          }
        }
      }
    }
    .el-container {
      padding: 0;
      min-height: 500px;
      .el-header {
        background-color: #fff;
        border-radius: 6px;
        margin-bottom: 10px;
        --el-header-padding: 24px;
        > div {
          padding: 8px 12px;
          border-radius: 19px;
          background-color: #edeff4;
          margin-right: 10px;
          font-weight: 400;
          font-size: 14px;
          color: #777e90;
          line-height: 14px;
          text-align: left;
          font-style: normal;
          cursor: pointer;
        }
      }
      .el-main {
        border-radius: 6px;
        --el-main-padding: 16px 24px;
      }
      .el-footer {
        display: flex;
        justify-content: center;
        background-color: #fff;
        ::v-deep .el-pagination {
          --el-pagination-bg-color: transparent;
          --el-pagination-button-disabled-bg-color: transparent;
          .btn-next,
          .btn-prev {
            background-color: transparent;
          }
        }
      }
    }
  }
}
</style>
